<script setup lang="ts">
// setup语法糖 我们就不需要再使用setup函数 也就不需要在将数据return出去了。
import { reactive, ref } from 'vue'

const num: number = 100

function getNum() {
  console.log(num)
}

// let name: string = '张三' // 这是正常的写法 还不是响应式数据

const name = ref<string>('张三')// 使用 ref 实现响应式数据

function changeName() {
  // name = '李四'
  // console.log(name, '不是响应式数据的name') // 这是还没有成为响应式数据的name的值
  console.log(name, '成为响应式数据的name') // 这是称为响应式数据name的值
  // 如果我们使用ref 获取值时需要带上 .value
  console.log(name.value, '未修改前name的值')
  // name.value = '李四'
  console.log(name.value, '修改后的name的值')

}

interface ObjType1 {
  name: string,
  age: number
}

// ref也可以用来声明引用数据类型 但是不推荐
// const obj = <ObjType1>({ // 如果不是响应式数据 数据可以修改 但是页面上不会更新
const obj = ref<ObjType1>({
  name: '王五',
  age: 18
})

function changeObj() {
  // console.log(obj.age++) // 我们发现 当obj不是响应是数据的时候 打印出来的是更新后的值 但是页面上没有更新

  obj.value.age++ // 使用 ref声明 的引用数据类型也可以进行操作
  console.log(obj.value.age)

}

// 使用接口声明我们将来可能需要的数据类型
interface ObjType2 {
  id: number,
  title: string
}

const obj2: ObjType2[] = [{ id: 1, title: '你好' }, { id: 2, title: '我不好' }, { id: 3, title: '为什么' }, {
  id: 4,
  title: '我想哭'
}, { id: 5, title: '不要哭' }]
console.log(obj2);


// reactive声明响应式的引用数据类型
interface DataTypes {
  msg: string,
  code: number
}

interface ObjType3 {
  sex: string,
  age: number,
  data: DataTypes
}

const obj1 = reactive<ObjType3>({
  sex: '男',
  age: 20,
  // 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
  data: {
    msg: '操作成功',
    code: 0
  }
})
// 我们发现 使用reactive声明的引用数据类型 可以将页面的值和我们理想的值保持一致
// 并且 对象嵌套的值也可以被修改
function changeObj1() {
  console.log(obj1)
  obj1.age++
  console.log(obj1.data.msg)
  obj1.data.msg = '操作失败'
}

// 将一个里面的 元素 都是 数字类型 的 数组 变成响应式的
const arr = reactive<number[]>([1, 2, 3])

// console.log(arr) // Proxy(Array) {0: 1, 1: 2, 2: 3}

function changeArr() {
  // 修改数组的第一个值改为0
  arr[0] = 0
  console.log(arr, '修改后的arr数组')
}

// 总结：
//  我们使用setup语法糖就可以不需要在书写setup函数了，理所当然的也就不需要使用return函数了。
//  使用ref函数 可以将基本数据类型转换为响应式数据，如果我们使用ref 获取值时需要带上 .value
//  使用reactive函数可以将引用数据类型的数据转换为响应式 但是里面的属性还不是响应式
//  reactive函数响应式转换是“深层的”：也就是说会影响对象内部所有嵌套的属性


</script>

<template>
  index2
  {{ num }}--{{ name }}--{{ obj.age }}--{{ obj1.age }}--{{ obj1.data.msg }}--{{ arr[0] }}
  <button @click="getNum">点击</button>
  <button @click="changeName">changeName</button>
  <button @click="changeObj">changeObj</button>
  <button @click="changeObj1">changeObj1</button>
  <button @click="changeArr">changeArr</button>
  <div class="box1">
    <div class="box2"></div>
  </div>
</template>

<style scoped lang="less">
@color: red;

.box1 {
  width: 300px;
  height: 200px;
  background-color: @color;

  .box2 {
    width: 100px;
    height: 100px;
    background-color: green;
  }
}
</style>
